<template>
   <div id="detail">
      <detail-nav-bar @titleClick="titleClick" class="nav-bar" ref="nav"></detail-nav-bar>
     <scroll class="content" ref="scroll" :probe-type="3" @scroll="contentScroll">
        <detail-swiper :top-images="topImages"></detail-swiper>
        <detail-base-info :goods="goods"></detail-base-info>
        <detail-shop-info :shop="shop"></detail-shop-info>
        <detail-goods-info :detailInfo="detailInfo" 
        @detailImageLoad="detailImageLoad"></detail-goods-info>
        <detail-param-info :param-info="paramInfo" ref="params"></detail-param-info>
        <detail-comment-info :comment-info="commentInfo" ref="comment"></detail-comment-info>
        <goods-list :goodsList="recommends" ref="recommend"></goods-list>
     </scroll>
     <detail-bottom-bar @addToCart="addToCart"></detail-bottom-bar>
      <back-top @click.native="backClick" v-show="isShowBackTop"/>
      <!-- <toast message="哈哈哈哈"></toast> -->
   
    
   </div>
</template>

<script>
import DetailNavBar from './childComps/DetailNavBar'
import DetailSwiper from './childComps/DetailSwiper'
import DetailBaseInfo from './childComps/DetailBaseInfo'
import DetailShopInfo from './childComps/DetailShopInfo'
import DetailGoodsInfo from './childComps/DetailGoodsInfo'
import DetailParamInfo from './childComps/DetailParamInfo'
import GoodsList from 'components/content/goods/GoodsList'
import DetailCommentInfo from './childComps/DetailCommentInfo'
import DetailBottomBar from './childComps/DetailBottomBar'
import Toast from 'common/toast/Toast'

import Scroll from 'common/scroll/Scroll'
import {debounce} from "../../common/utils"
import {itemListenerMinxin,backTopMixin} from "../../common/mixin"


import {getDetail,Goods,Shop,GoodsParam,getRecommend} from "network/detail"
export default {
  name:'Detail',
   components: {
     DetailNavBar,
     DetailSwiper,
     DetailBaseInfo,
     DetailShopInfo,
     Scroll,
     DetailGoodsInfo,
     DetailParamInfo,
     DetailCommentInfo,
     GoodsList,
     DetailBottomBar,
     Toast
   },
   mixins:[itemListenerMinxin,backTopMixin],
   data () {
      return {
        iid:null,
        topImages:[],
        goods:{},
        shop:{},
        detailInfo:{},
        paramInfo:{},
        commentInfo:{},
        recommends:[],
        themeTopYs:[],
        themeTopY:null,
        currentIndex:0,
        message:''
         
      };
   },
   created(){
     //保存传入的iid
     this.iid = this.$route.params.iid
     //2.根据iid请求详情数据
     getDetail(this.iid).then(res => {
       //1.获取顶部的图片轮播数据
       const data = res.result;
       this.topImages = data.itemInfo.topImages

       //2.获取商品信息
       this.goods = new Goods(data.itemInfo,data.columns,data.shopInfo.services)
       //3.创建店铺信息的对象
       this.shop = new Shop(data.shopInfo)
       //4.保存商品的详情数据
       this.detailInfo = data.detailInfo;
       //5.获取参数信息
       this.paramInfo = new GoodsParam(data.itemParams.info,data.itemParams.rule)
       //6.获取评论信息
       if (data.rate.cRate !== 0){
         this.commentInfo = data.rate.list[0]
       }

      
     })
    // 3.请求推荐数据
    getRecommend().then(res =>{
      this.recommends = res.data.list
    })
    //4.给themeTopYs赋值
    this.themeTopY = debounce(() => {
          this.themeTopYs = []
          this.themeTopYs.push(0);
          this.themeTopYs.push(this.$refs.params.$el.offsetTop);
          this.themeTopYs.push(this.$refs.comment.$el.offsetTop);
          this.themeTopYs.push(this.$refs.recommend.$el.offsetTop);
          this.themeTopYs.push(Number.MAX_VALUE);
          console.log(this.themeTopYs)
    },1000)


   

   },
   mounted(){
     
   },
   destroyed () {
     this.$bus.$off('itemImgLoad',this.itemImgListener)
   },
   updated(){
     
   },
   computed: {},

   methods: {
      //4.监听详情的图片加载完成
     detailImageLoad(){
       this.refresh()

       this.themeTopY()    
     },

     titleClick(index){
       this.$refs.scroll.scrollTo(0,-this.themeTopYs[index],100)
     },

     contentScroll(position){
        //判断backtop是否显示
      this.isShowBackTop = (-position.y ) > 1000
       //1.获取y值
       const positionY = -position.y
       //2.positionY和主题中的值进行对比
       let length = this.themeTopYs.length
       for(let i = 0; i < length ;i++){
         if (this.currentIndex !== i && (positionY >= this.themeTopYs[i] &&
          positionY < this.themeTopYs[i+1])){
            this.currentIndex = i;
            this.$refs.nav.currentIndex = this.currentIndex
          }
       }

     },
     addToCart(){
       //1.获取购物车需要展示的商品信息
       const product = {}
       product.image = this.topImages[0];
       product.title = this.goods.title;
       product.desc = this.goods.desc;
       product.price = this.goods.nowPrice;
       product.iid = this.iid;

       //2.将商品添加到购物车
       this.$store.commit('addCart',product)
     }
     
    

   }
}
</script>
<style  scoped>
#detail{
  position: relative;
  z-index: 10;
  background-color: #fff;
  height: 100vh;

}
.nav-bar{
 z-index: 9999;
 background-color: #fff;
}
.content{
  height: calc(100% - 44px);
}
</style>